.snack{
    top: .2rem;
    left: 50%;
    width: 80%;
    bottom: auto;
    z-index: 1000;
    display: flex;
    position: fixed;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: .05rem;
    background-color: rgba(0, 0, 0, 0.8);
    .s-content{
        color: white;
        width: 100%;
        margin: .2rem;
        font-size: .3rem;
        min-height: .4rem;
    }
}
.snack.show{
    transform: translateX(-50%);
    .s-content{
        opacity: 1;
    }
}
.snack.hide{
    transform: translate(-50%, calc(-0.2rem - 100%));
    transition: all .4s cubic-bezier(0.23, 1, 0.32, 1) .4s;
    .s-content{
        opacity: 0;
        transition: opacity .6s cubic-bezier(0.23, 1, 0.32, 1);
    }
}
